<template>
  <span>
    <span class="label">{{ label || "" }}</span>
    <span v-if="readonly">
      <i class="el-icon-info icon" />
    </span>
    <span v-else>
      <i v-if="showSignTip"
         class="el-icon-info icon" />
      <Tooltip v-if="editing && goodsOrderType && label"
               :content="'拒签'"
               :placement="'top'">
        <i class="el-icon-edit-outline icon mr10"
           @click="handleRefuseSign" />
      </Tooltip>
      <i v-if="editing"
         class="el-icon-circle-close icon"
         @click="handleClear" />
      <i v-else
         class="el-icon-edit icon"
         @click="handleEdit" />
    </span>
  </span>
</template>

<script>
import Tooltip from "@components/basic/Tooltip.vue";
// 编辑按钮
export default {
  name: "GoodsPen",
  props: ["value", "label", "readonly", "waybill", "goodsOrderType", "showSignTip"],
  components: { Tooltip },
  computed: {
    editing () {
      return this.value || false;
    },
    // 关单待办或已关单
    closeFlag () {
      return [10, 20, 50, 60].includes(this.waybill?.close?.status);
    },
    financeFlagTips () {
      return {
        1: "运单已加入对账单，不能操作",
        2: "运单已对账，不能操作",
        3: "运单已结账，不能操作"
      }
    }
  },
  methods: {
    handleEdit () {
      // if (this.waybill?.finance?.financeFlag) {
      //   return this.$message({ type: 'warning', message: this.financeFlagTips[this.waybill.finance?.financeFlag] })
      // }
      if (this.closeFlag) {
        this.$message.warning("运单有关单待办需要处理，暂不能操作");
        return false;
      }
      this.$emit("input", true);
    },
    handleClear () {
      this.$emit("input", true);
      this.$emit("clear");
    },
    handleRefuseSign () {
      this.$emit("input", true);
      this.$emit("refuseSign");
    }
  }
};
</script>

<style scoped>
.icon {
  color: var(--prev-icon-color-orange);
  cursor: pointer;
}
.label {
  white-space: pre-line;
}
.mr10 {
  margin-right: 10px !important;
}
</style>
